<template>
    <div class="MyCollection">
        <div class="content">
            {{ getValue }}
            <!-- <el-page-header @back="goBack" content="我的收藏" /> -->
            <div class="backtitle">
                <i class="iconfont" @click="goBack">&#xe659;</i><span>我的收藏</span>
            </div>
        </div>
        <div class="list">
            <div class="item" :key="el.id" v-for="(el,index) in getCollectionData.slice(
          (current - 1) * pageSize,
          current * pageSize
        )">
                <div class="item_left">
                    <div @click="godetail(el)">
                        {{ el.content }}
                    </div>
                    <div>
                        <i class="iconfont blur reverse">&#xe618;</i>6
                        <i class="iconfont">&#xe65b;</i> 50
                    </div>
                </div>
                <div class="item_right" @click="handRemove(index);">
                    <i class="iconfont blur">&#xe86a;</i>
                    <span> 取消收藏</span>
                </div>
            </div>
        </div>
        <div class="pagination">
            <el-pagination layout="prev, pager, next" :page-size="pageSize" @current-change="handCurrentChange" :total="getCollectionData.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";

export default {
  name: "MyCollection",
  data() {
    return {
      current: 1,
      pageSize: 8,
      value: "",
    };
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(["getCollectionData", "getValue"]),
  },
  created() {
    this.fetchCollectionList();
  },
  methods: {
    //  ...mapMutations([
    //   'setCollectionList',
    // ]),
    ...mapMutations(["setdetail"]),
    ...mapActions(["fetchCollectionList",'deleteCollectionList']),
    goBack() {
      console.log("go back");
      this.$router.push({ path: "/" });
    },
    handRemove(index) {
        let data=this.getCollectionData.splice(index, 1)
        this.deleteCollectionList(data)
    },
    handCurrentChange(current) {
      console.log(current);
      this.current = current;
      },
      godetail(data) { 
          this.$router.push('/detail');
            this.setdetail(data)
      }
  },
};
</script>

<style scoped>
.MyCollection {
    width: 100%;
    height: 100%;
}

.content {
    padding: 0 40px;
    margin-top: 20px;
}
.backtitle {
    font-size: 24px;
    font-weight: 900;
    display: flex;
    align-items: center;
}
.backtitle i {
    font-size: 40px;
    margin-right: 10px;
    font-weight: 200;
    cursor: pointer;
}
.list {
    height: calc(100% - 300px);
    overflow: hidden;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 0 34px;
    overflow: auto;
    margin-top: 10px;
}
.item {
    width: 40%;
    height: 130px;
    border: solid 1px #999;
    border-radius: 10px;
    margin-top: 30px;
    display: flex;
    align-items: center;
}
.item_left {
    flex: 1;
    height: 100%;
    padding: 20px 0;
    padding-left: 15px;
}
.item_left div {
    height: 50%;
    display: flex;
    align-items: center;
}
.item_left i {
    margin-right: 10px;
}
.item_left i:last-child {
    margin-left: 15px;
}
.item_right {
    width: 134px;
    height: 62px;
    border: solid 1px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}
.item_right span {
    margin-left: 5px;
}
.pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}
.blur {
    color: rgb(0, 121, 254);
}
/* .reverse{
    transform: rotate(180deg);
} */
</style>
